Flat Bar Chart

Overview

The 'Flat Bar Chart' Lightning Web Component (LWC) provides a clear and effective visualization tool for displaying comparative data within Salesforce. This component is designed to represent data in a horizontal bar chart format, allowing users to easily compare different categories or metrics side by side. By leveraging the Flat Bar Chart, users can quickly assess performance, identify trends, and make data-driven decisions.

How Does It Work?

The Polar Chart displays data as a circular graph, with segments representing different metrics. The chart includes:

• Actual Value: The current value of the metric.
• Target Value: The target or threshold value that the current value is measured against.
• Title (Optional): A specific title for the chart, providing context to the data being displayed.
• Format Pipe (Optional): An optional function to customize the format of the displayed values (e.g., percentage formatting).

Usage

Setting Up the Flow

To use the Polar Chart, you need to set up a flow in Salesforce that retrieves the necessary data and passes it to the LWC. Here’s how you can do it:

1. Define the ResultCollection Variable:

   • In the Flow Builder, create a new variable named ResultCollection.
   • Set the Data Type to Text.
   • Ensure "Allow multiple values (collection)" is checked.
   • Mark it as "Available for output" so it can be accessed by the component.

2. Create a Formula Resource:

   • Create a new resource of type Formula.
   • Set the API Name to something like LaFormula.
   • Set the Data Type to Text.
   • Use the formula editor to construct your JSON string. For example:

     '{"actualValue": "' + TEXT(5) + '", "targetValue": "' + TEXT(10) + '", "title": "Test"}'
   • This formula constructs a JSON string with the specified values.

3. Assign the Formula to ResultCollection:

   • Add an Assignment element to your Flow.
   • Set the ResultCollection variable to the value of the formula resource (LaFormula).
   • Ensure the operator is set to Add.

4. Save and Activate the Flow:

   • Save your Flow.
   • Activate the Flow if it's not already active.

Using Input Queries

Alternatively, you can use input queries to provide data to the Flat Bar Chart. Here’s how:

1. Define Input Queries:

   • Create a list of input queries as a JSON string. Each query should include a key (reference ID) and a value (SOQL query).
   • Example:

     [
       {"referenceId": "wonOpportunities", "query": "SELECT SUM(Amount) totalAmount FROM Opportunity WHERE IsWon = true"}
     ]

2. Pass Input Queries to the Component:

   • Use the inputQueries attribute of the Flat Bar Chart component to pass the JSON string of input queries.
   • The component will execute this query and use the results to populate the chart.

3. Create a Transformation Function:

   • Define a JavaScript transformation function in a file and upload it as a Static Resource in Salesforce. This function will process the query results and format them for the Flat Bar Chart.

   • Example:

     /* All functions should be defined within the window.MobeeDynamicFunctions scope in order to work with the Mobee mobile App */
     
     window.MobeeDynamicFunctions = {
       calculateTotalWonAmount: (inputData) => {
         // Represents the input data retrieved by the defined reference
         let wonOpportunities = inputData['wonOpportunities'];
         if (wonOpportunities && wonOpportunities.length) {
           const totalAmount = wonOpportunities[0].totalAmount;
           let flatbarDataItem = {
             actualValue: totalAmount,
             targetValue: 1000000, // Fixed objective amount for comparison (e.g., $1,000,000)
             title: "Total Won Amount",
             subtitle: "Against Sales Target",
           };
           return [flatbarDataItem];
         }
         return [];
       }
     }

4. Upload the JavaScript File as a Static Resource:

   • In Salesforce, navigate to Setup.
   • In the Quick Find box, type Static Resources and select Static Resources.
   • Click New to upload your JavaScript file containing the transformation function.
   • Provide a name for the Static Resource (e.g., MyMobeeFunctions) and upload the file.

5. Set the Transformation Function:

   • In Mobee Settings, set the Mobee Dynamic Function File Name to the name of the Static Resource you created (e.g., MyMobeeFunctions).
   • In the field labeled JavaScript Transformation Function Name, enter the name of the function you defined (e.g., calculateTotalWonAmount).